<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
		<title>EasyCharts - Stockcharts</title>
		<!--Load the AJAX API-->
		<script type="text/javascript" src="https://www.google.com/jsapi"></script>
		<script type="text/javascript">
			// Load the Visualization API and the piechart package.
			google.load('visualization', '1', {
				'packages' : ['piechart', 'table']
			});

			// Set a callback to run when the Google Visualization API is loaded.
			google.setOnLoadCallback(function() {

				// Callback that creates and populates a data table,
				// instantiates the pie chart, passes in the data and
				// draws it.

				// Create our data table.
				var data = new google.visualization.DataTable();
				data.addColumn('string', 'Topping');
				data.addColumn('number', 'Slices');
				data.addRows([['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2]]);

				// Instantiate and draw our chart, passing in some options.
				var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
				chart.draw(data, {
					title : 'Pizzas in stock - Pie Chart',
					width : 430,
					height : 300,
					is3D : true
				});

				// Instantiate and draw our chart, passing in some options.
				var chart = new google.visualization.Table(document.getElementById('chart_div2'));
				chart.draw(data, {
					width : 430,
					height : 300
				});

				// Instantiate and draw our chart, passing in some options.
				var chart = new google.visualization.AreaChart(document.getElementById('chart_div3'));
				chart.draw(data, {
					title : 'In Stock - Area Chart',
					width : 430,
					height : 300,
					is3D : true
				});

				// Instantiate and draw our chart, passing in some options.
				var chart = new google.visualization.ColumnChart(document.getElementById('chart_div4'));
				chart.draw(data, {
					title : 'In Stock - Column Chart',
					width : 430,
					height : 300,
					is3D : true
				});

			});
		</script>
	</head>
	<body>
		<div id="content" style="min-width: 1200px; max-width: 1200px;">
			<?php
			// Starts the session
			session_start();

			// Includes
			include 'validateuser.php';
			include 'header.php';
			include 'menu.php';
			?>
			<div id="pagecontent" style="height: 100%; padding-bottom: 26px;">
				<div id="contentbox" style="width: 900px; visibility: visible;">
					<h2 style="margin-top: 0px; margin-bottom: 30px; border-bottom: 1px solid #cccccc; width: 100%;"><img src="img/chart_pie.png"/> Stock Charts </h2>
					<div style="border: 1px solid #cccccc; width: 432px; height: 300px; float: left; margin-bottom: 20px;" id='chart_div'></div>
					<div style="border: 1px solid #cccccc; width: 432px; height: 300px; float: right; margin-bottom: 20px;" id='chart_div2'></div>
					<div style="border: 1px solid #cccccc; width: 432px; height: 300px; float: left;" id='chart_div3'></div>
					<div style="border: 1px solid #cccccc; width: 432px; height: 300px; float: right;" id='chart_div4'></div>
				</div>
			</div>
			<?php
			include 'footer.php';
			?>
		</div>
	</body>
</html>